<template lang="html">
  <div class="swiper-photo">
    <swiper
    :options="swiperOption"
    ref="photoSwiper"
    @slideChangeTransitionEnd="slideChangeTransitionEnd"
    @slideChangeTransitionStart="slideChangeTransitionStart"
    v-longpress="downRecord"
    >
      <!-- <swiper-slide class="col-all-center"></swiper-slide> -->
    </swiper>
  </div>
</template>

<script>
import { clickRecord } from 'utils/tool'
import PinchZoom from 'pinch-zoom-js'
import { mapState } from 'vuex'

export default {
  name: 'swiper-photo',
  props: {
    picList: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number
    },
    isMyPhoto: {
      type: Boolean
    }
  },
  data() {
    return {
      timer: null,
      swiperOption: {
        spaceBetween: 15,
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 1
        },
        keyboard: {
          enabled: true
        },
        virtual: {
          slides: [],
          renderSlide: (slide, index) => {
            return `<div class="swiper-slide">
                      <div class="zoom row-all-center" style="height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch;">
                        <div class="drag">
                          <img class="drag-img ${slide.forbidden}" src="${slide.big_img}" alt="" />
                        </div>
                      </div>
                    </div>`
          }
        }
      },
      zoomOption: {
        draggableUnzoomed: false,
        minZoom: 1
      },
      pz: null,

      wrapDom: ''
    }
  },
  computed: {
    ...mapState(['activityDetails', 'nw']),
    swiper() {
      return this.$refs.photoSwiper.swiper
    },
    isZoom() {
      if (this.pz) {
        return this.pz.zoomFactor > 1 ? true : false
      }
      return false
    },
    filterPicList() {
      return this.picList.filter((item) => {
        if (this.isMyPhoto) { // 我的 图片来自不同活动 需单独判断
          let hasPay = ((item.is_sell & 131072) > 0) && (item.pic_price > 0 || item.origin_pic_price > 0)
          item.forbidden = hasPay ? 'forbidden' : ''
        } else {
          item.forbidden = this.hasPay ? 'forbidden' : ''
        }
        return item.big_img
      })
    },
    hasPay() {
      let a = this.activityDetails
      return ((a.is_sell & 131072) > 0 && !this.nw) && (a.pic_price > 0 || a.origin_pic_price > 0)
    },
  },
  watch: {
    isZoom(n) {
      if (n) {
        this.onZoom()
      }
    },
    picList: {
      handler(n) {
        this.updateSwiper();
      },
      deep: true
    }
  },
  mounted() {
    this.updateSwiper();
  },
  methods: {
    slideChangeTransitionEnd() {

    },
    slideChangeTransitionStart() {
      this.$emit('slideChange', this.swiper.activeIndex)
      this.getPinch()
    },
    downRecord() {
      clickRecord('pic_down', this.filterPicList[this.activeIndex].pic_hash);
    },
    getPinch() {
      // if (this.timer === null) return
      let activeDom = this.wrapDom.querySelector('.swiper-slide-active')
      let zoom = activeDom.querySelector('.zoom')
      let drag = activeDom.querySelector('.drag')
      let dragImg = activeDom.querySelector('.drag-img')
      let _this = this
      _this.photoDrag(drag)
      _this.pz = new PinchZoom(zoom, _this.zoomOption)
    },
    onZoom() {
      this.$emit('onZoom')
    },
    photoDrag(target) {
      // 待优化
      let that = this
      // let parentOpacity = 1
      let imgScale = 1
      let dragClose = false

      let iw = target.offsetWidth,
        ih = target.offsetHeight
      let startX = 0
      let startY = 0
      let moveY = 0
      let moveX = 0
      let touchAngle = 0

      function _start(ev) {
        if (ev.targetTouches.length === 1) {
          target.style.transition = ''
          target.style.webkitTransition = ''
          that.wrapDom.style.transition = ''
          that.wrapDom.style.webkitTransition = ''

          startY = ev.touches[0].clientY
          startX = ev.touches[0].clientX
        }
      }
      function _move(ev) {
        if (ev.targetTouches.length === 1) {
          moveY = ev.touches[0].clientY - startY
          moveX = ev.touches[0].clientX - startX

          // parentOpacity = 1 - Math.abs(moveY) / 500
          imgScale = 1 - Math.abs(moveY) / 500

          // 触摸滑动角度
          touchAngle = Math.abs(moveY / moveX)
          let parent = target.parentNode
          dragClose = parent.style.transform.indexOf('scale(1, 1)') > -1 ? true : false
          if (touchAngle > 1 && dragClose) {
            that.$emit('onDrag', true);
            target.style.webkitTransform =
              'translate(' +
              moveX +
              'px, ' +
              moveY +
              'px) scale(' +
              imgScale +
              ')'
            target.style.transform =
              'translate(' +
              moveX +
              'px, ' +
              moveY +
              'px) scale(' +
              imgScale +
              ')'
            // that.wrapDom.style.opacity = parentOpacity
          }
        }
      }
      function _end(ev) {
        if (touchAngle > 1 && dragClose) {
          if (Math.abs(moveY) > 130) {
            target.style.webkitTransition = 'all .5s'
            target.style.transition = 'all .5s'
            target.style.webkitTransform = 'scale(0)'
            target.style.transform = 'scale(0)'

            setTimeout(function() {
              that.$emit('close')
            }, 200)
          } else {
            target.style.webkitTransform = 'translateY(0) scale(1)'
            target.style.transform = 'translateY(0) scale(1)'
            target.style.webkitTransition = 'all .2s'
            target.style.transition = 'all .2s'
            that.wrapDom.style.opacity = 1
            that.wrapDom.style.webkitTransition = 'all .5s'
            that.wrapDom.style.transition = 'all .5s'
            that.$emit('onDrag', false);
          }
        }
      }
      target.addEventListener('touchstart', _start, false)
      target.addEventListener('touchmove', _move, false)
      target.addEventListener('touchend', _end, false)

      let dragImg = target.querySelector('.drag-img')
      let img = new Image()
      img.src = dragImg.getAttribute('src')
      img.onload = function() {
        if (dragImg.height > window.innerHeight) {
          target.removeEventListener('touchstart', _start, false)
          target.removeEventListener('touchmove', _move, false)
          target.removeEventListener('touchend', _end, false)
          target.style.alignSelf = 'flex-start'
        }
      }
    },
    updateSwiper () {
      this.swiper.virtual.removeAllSlides()
      this.wrapDom = document.querySelector('.swiper-photo')
      this.swiper.virtual.appendSlide(this.filterPicList)
      this.swiper.update()
      this.swiper.slideTo(1, 0, true)
      this.swiper.slideTo(this.activeIndex, 0, true)
      this.getPinch()
    }
  }
}
</script>

<style lang="scss">
@import 'assets/scss/index.scss';

.swiper-photo {
  width: 100%;
  height: 100vh;
  background-color: #000;
  .swiper-container {
    height: 100%;
  }
  .swiper-wrapper {
  }
  .swiper-slide {
    width: 100%;
    height: 100vh;
    .zoom {
      width: 7.5rem;
      -webkit-user-drag: none;
      font-size: 0;
    }
    .drag {
      font-size: 0;
    }
    .drag-img {
      width: 7.5rem;
      &.forbidden {
        pointer-events: none;
      }
    }
  }
}
</style>
